<template>
  <div class="billing-tabs">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="monthly">
        <div slot="label" class="tab-label">月结账单</div>
        <monthly />
      </el-tab-pane>
      <el-tab-pane name="annual" lazy>
        <div slot="label" class="tab-label">年度账单</div>
        <annual />
      </el-tab-pane>
    </el-tabs>
    <div class="tab-fixed-btn" @click="goDetailStat">明细统计</div>
  </div>
</template>

<script>
import Annual from '../Annual.vue'
import Monthly from '../Monthly.vue'
export default {
  components: { Monthly, Annual },
  data() {
    return {
      activeName: 'monthly'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    goDetailStat() {
      this.$router.push({ path: 'detail' })
    }
  }
}
</script>

<style lang="scss">
.billing-tabs {
  .el-tabs {
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
  }

  .el-tabs__active-bar {
    height: 3px;
    border-radius: 4px;
  }

  .el-tabs__content {
    padding: 0;
  }
}
</style>

<style lang="scss" scoped>
.billing-tabs {
  position: relative;
  padding: 10px 0 10px 10px;
}

.tab-fixed-btn {
  position: absolute;
  padding-top: 10px;
  top: 0;
  right: 10px;
  font-size: 14px;
  color: #5AC6B7;
  line-height: 40px;
  cursor: pointer;
}

.tab-label {
  width: 76px;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
}
</style>
